/**
 * 底部导航
 */
<template>
  <div class="bottom_tab">
    <van-tabbar v-model="active" route>
      <van-tabbar-item name="home" replace to="/home">
        <span>首页</span>
        <template #icon="props">
          <img :src="props.active ? icon.active : icon.inactive" />
        </template>
      </van-tabbar-item>
      <van-tabbar-item name="menus" replace to="/menus" icon="logistics">菜单</van-tabbar-item>
      <van-tabbar-item name="shoppingcart" :badge="num" replace to="/shoppingcart" icon="cart-o">购物车</van-tabbar-item>
      <van-tabbar-item name="my" replace to="/my" icon="manager-o">我的</van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script>
export default {
  data() {
    return {
      num: 100,
      active: "home",
      icon: {
        active: "https://img.yzcdn.cn/vant/user-active.png",
        inactive: "https://img.yzcdn.cn/vant/user-inactive.png"
      }
    };
  },
  /**
   * 创建完毕
   */
  // 监听数字
  watch: {},
  created() {
    if (this.num >= 100) {
      this.num = "99+";
    }
  },
  //过滤器
  filters: {},
  /**
   * 里面的方法只有被调用才会执行
   */
  methods: {}
};
</script>

<style scoped>
.bottom_tab {
  width: 50px;
}
</style>

 
 